<template>
  <div>
  <el-row :gutter="20">
  <el-col :span="14">
    <div id="chart1"></div>
    <div id="chart3"></div>
    </el-col>
    <el-col :span="10">
    <div id="chart2"></div>
    </el-col>
</el-row>
  </div>
</template>
<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
require("echarts/lib/chart/pie");
require("echarts/lib/chart/line");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
  data() {
    return {
      Fisrt: [],
      all: 0,
      MovieName: [],
      Price: [],
      Second:[],
      SexName:[],
      SexCount:[],
      Third:[],
      date1:[],
      price1:[],
    };
  },
   async created()  {
   await this.Ajax.get("api/Order/GetMoNameAndMoney").then((M) => {
        this.Fisrt = M.data;
        for (let index = 0; index < M.data.length; index++) {
          this.MovieName[index] = M.data[index]["m_Item1"];
          this.Price[index] = M.data[index]["m_Item2"];
        }
        this.drawLine()
        this.all = M.data.length;
      });
      await this.Ajax.get("api/User/GetSex").then((M) => {
        this.Second = M.data;
        for (let index = 0; index < M.data.length; index++) {
          this.SexName[index] = M.data[index]["m_Item1"];
          this.SexCount[index] = M.data[index]["m_Item2"];
        }
        this.drawPie();
        this.all = M.data.length;
      });
      await this.Ajax.get("api/Order/GetDateandMoney").then((M) => {
        this.Third = M.data;
        for (let index = 0; index < M.data.length; index++) {
          this.date1[index] = M.data[index]["m_Item1"];
          this.price1[index] = M.data[index]["m_Item2"];
        }
        this.drawLine2()
        this.all = M.data.length;
      });

  },

  mounted() {
    
  },
  methods: {
    async getData() {
      
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("chart1"));
      // 绘制图表
      myChart.setOption({
        title: { text: "电影票房" },
        tooltip: {},
        xAxis: {
           axisLabel: {interval:0,rotate:40 },
          data:this.MovieName
        },
        yAxis: {},
        series: [
          {
            name: "票房",
            type: "bar",
            data: this.Price,
          },
        ],
      });
    },
    drawPie(){
      let myChart = echarts.init(document.getElementById("chart2"));
      // 绘制图表
      myChart.setOption({
        title: { text: "用户人群" },
        series : [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            data:[
                {value:this.SexCount[0], name:this.SexName[0]},
                {value:this.SexCount[1], name:this.SexName[1]},
            ]
        }
    ]
      });
    },
    drawLine2() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("chart3"));
      // 绘制图表
      myChart.setOption({
        title: { text: "每日票房" },
        tooltip: {},
        xAxis: {
          data: this.date1
        },
        yAxis: {},
        series: [
          {
            name: "票房",
            type: "line",
            data: this.price1,
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
#chart1 {
  width: 100%;
  height: 430px;
}
#chart2 {
  width: 100%;
  height: 800px;
}
#chart3 {
  width: 100%;
  height: 400px;
}
</style>
